<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.initInventory.inventory')">
            <el-input maxlength="13" show-word-limit v-model="formInline.initialstocktakecode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.person')">
            <el-input maxlength="20" show-word-limit v-model="formInline.stockuser"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.type')">
            <el-select v-model="formInline.stocktype">
              <el-option
                v-for="(item,index) in stocktypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.method')">
            <el-select v-model="formInline.stockway">
              <el-option
                v-for="(item,index) in stockwayOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SKU">
            <el-input maxlength="50" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.location')">
            <el-input maxlength="20" show-word-limit v-model="formInline.locationcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.result')">
            <el-select v-model="formInline.stockresult">
              <el-option
                v-for="(item,index) in stockresultOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.initInventory.date')" class="date-picker">
            <el-date-picker
              v-model="inventoryDate"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              :start-placeholder="$t('m.otherstore.startdate')"
              :end-placeholder="$t('m.otherstore.enddate')"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleMultiSelectionChange">
      <!-- <el-table-column align="center" type="selection" width="55"></el-table-column> -->
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" :label="$t('m.initInventory.stocktakecode')">
        <template slot-scope="scope">
          <template v-if="scope.row.state!==7&&hasPermission('search')">
            <el-button @click.stop="getInventoryDetail(scope.row.initialstocktakeid)" type="text">{{scope.row.initialstocktakecode}}</el-button>
          </template>
          <template v-else>{{scope.row.initialstocktakecode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.state')">
            <template slot-scope="scope">{{!scope.row.state?$t('m.inventory.state4'):$t('m.inventory.state1')}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.inventory.type')">
        <template slot-scope="scope">{{scope.row.stocktype|stocktypeFilters}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.inventory.method')">
        <template slot-scope="scope">{{scope.row.stockway|stockwayFilters}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.inventory.result')">
        <template slot-scope="scope">{{scope.row.stockresult|stockresultFilters}}</template>
      </el-table-column>
      <el-table-column align="center" prop="stockuser" :label="$t('m.inventory.person')"></el-table-column>
      <el-table-column align="center" :label="$t('m.inventory.date')">
        <template slot-scope="scope">{{scope.row.stocktime|dateFilter}}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChange"
      @size-change="handleSizeChange">
    </el-pagination>
    <!-- table数据展示 end -->

    <inventoryDetailsPopup
      v-if="inventoryDetailsPopupVisible"
      :dialogVisible="inventoryDetailsPopupVisible"
      :detail="inventoryDetail"
      :stockOptions="[stocktypeOptions,stockwayOptions]"
      @close="inventoryDetailsPopupVisible=false">
    </inventoryDetailsPopup>
  </div>
</template>
<script>
let __this
export default {
  name:'initialInventoryHistory',
  data(){
    return {
      formInline:{
        initialstocktakecode:'', // 初盘单号
        stocktype:'', // 盘点类型
        stockway:'', //盘点方式
        stockresult:'', //盘点结果
        stockuser:'', // 盘点人
        productspeccode:'', // sku
        locationcode:'' // 盘点库位
      },
      tableData:[],
      inventoryDate:[], // 盘点时间

      inventoryDetailsPopupVisible:false, // 盘点单详情 dialog显示隐藏
      inventoryDetail:'' // 盘点单明细
    }
  },
  beforeCreate(){
    __this = this
  },
  mounted(){
    this.getData()
  },
  computed:{
    stocktypeOptions(){
      return[
        // 盘点类型
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.initInventory.type1'), value:1 },
        { label:this.$t('m.initInventory.type2'), value:2 },
        { label:this.$t('m.initInventory.type3'), value:3 },
        { label:this.$t('m.initInventory.type4'), value:4 },
        { label:this.$t('m.initInventory.type5'), value:5 }
      ]
    },
    stockwayOptions(){
      return[
        // 盘点方式
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.inventory.method1'), value:1 },
        { label:this.$t('m.inventory.method2'), value:2, disabled:true }
      ]
    },
    stockresultOptions(){
      return[
        //  盘点结果
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.inventory.normal'), value:1 },
        { label:this.$t('m.inventory.different'), value:2 },
        { label:this.$t('m.inventory.noresult'), value:3 }
      ]
    },
    dateRange(){
      let [stockdatestart, stockdateend] = this.inventoryDate || Array.from(2)
      if(!stockdatestart&&!stockdateend){
        return ''
      } else {
        return {
          stockdatestart, //盘点时间--start
          stockdateend //盘点时间--end
        }
      }
    }
  },
  filters:{
    stocktypeFilters(value){
      return  __this.stocktypeOptions.find((item)=>{
        return item.value === value
      }).label
    },
    stockwayFilters(value){
      return  __this.stockwayOptions.find((item)=>{
        return item.value === value
      }).label
    },
    stockresultFilters(value){
      return value===1?__this.$t('m.inventory.normal'):(value===2?__this.$t('m.inventory.different'):__this.$t('m.inventory.noresult'))
    }
  },
  components:{
    inventoryDetailsPopup:()=>import('@/components/initialInventoryHistory/inventory-details-popup')
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let formInline = this.cloneObject(this.formInline)
      if(this.dateRange) Object.assign(formInline,this.dateRange)
      let options = {
        method:'get',
        url:`/initialstocktake/history`,
        params:{...formInline, ...{page:this.page,rows:this.rowSize}}
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        this.page = data.current
        setTimeout(()=>this.tableLoading=false,500)
        if (!this.tableData.length)
          return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    //  根据盘点单id获取盘点详情（新增，编辑，盘点）
    getInventoryDetail(id){
      let options = {
        method:'get',
        url:`/initialstocktake/${id}`
      }
      this.$axios(options).then(({ data }) => {
        this.inventoryDetail = data
        this.inventoryDetailsPopupVisible = true
      })
    }
  },
  beforeRouteLeave(to, form, next){
    this.inventoryDetailsPopupVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
.date-picker ::v-deep .el-range-editor {
  width: 100%;
}
</style>